<template>
  <div>
    <!-- 第五个echarts -->
    <div id="five" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
   mounted() {
    this.diwu();
  },
  methods: {
    diwu() {
      // 基于准备好的dom，初始化echarts实例
      let five = this.$echarts.init(document.getElementById("five"));
      // 绘制图表
      five.setOption({
        title: {
          text: "成绩分析图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["入学", "期中", "期末"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["语文", "数学", "英语", "理综", "文宗"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "入学",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "期中",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "期末",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190],
          },
        ],
      });
      //宽度自适应
      window.onresize = function () {
        five.resize();
      };
    },
  },
};
</script>

<style lang="scss" scoped>
</style>